<template>
  <div 
  class = "header"
  :class = "[scrollheaderchange]"
  >
    <div class = "header-back">
      <span class = "iconfont icon-jiantou"></span>
    </div>
    <div class = "header-search"
    :class = "[scrollsearchchange]">
    <span class = "iconfont icon-search"></span>上海海昌海洋公园
    </div>
    <router-link to = '/location'>
    <div class = "header-city">{{this.$store.state.city}}<span class = "iconfont icon-jiantouxia"></span></div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  props:['city'],
  data(){
    return{
      scrollheaderchange:'',
      scrollsearchchange:'',
    }
  },
  methods:{
    scrollChange2(){
            let height = document.documentElement.scrollTop
            if(height>10){
                this.scrollheaderchange = 'scrollheaderchange'
                this.scrollsearchchange = 'scrollsearchchange'
            }else{
                this.scrollheaderchange = ''
                this.scrollsearchchange = ''
            }
        }
  },
  mounted(){
      window.addEventListener('scroll',this.scrollChange2)
  }
  
}
</script>

<style lang = 'stylus' scoped>
.scrollheaderchange
  background:#fff
  z-index:100
.header 
  width:100%
  line-height 0.88rem
  text-align center
  display flex
  .header-back
    float left
    width .9rem
  .header-search
    flex 1
    height .6rem
    line-height .6rem
    margin .12rem .2rem 0px .2rem
    border-radius .5rem
    box-shadow 0 0 .01rem .02rem #ccc
  .scrollsearchchange
    background:#ccc
  .header-city
    float right
    width 1.4rem

</style>